<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="node_modules/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			1111
		</div>
		<p>111</p>
		<p>222</p>
		<p>333</p>
		<p>444</p>
		<script type="text/javascript">
			// 原生对象和jQuery对象不能混用
			//原生对象
			var oBox = document.getElementById("box")
// 			oBox.onclick = function  () {
// 				this.innerHTML = "2222"
// 			}
            //jQuery方法,不能写this.html("2222")对象
// 			$("#box").click(function  () {
// 				// this指向原生对象
// 				console.log(this);
// 				// 原生对象不能使用jQuery方法,不能写this.html("2222")
// 				$(this).html("2222");
// 			})
			
			//原生对象转jQuery对象
			console.log($(oBox));
			
			//jQuery对象转转原生对象
			console.log($("#box").get(0));
			
			
		</script>
	</body>
</html>
